{% extends "base_electric.html" %}
{% load custom %}

{% block left_content %}
    <div class="row">
        <div class="well">
            <div class="btn-group">
                <a href="/electric/bar/{{ date|previousmonth:"%Y/%m/" }}">
                    <button class="btn btn-small"><i class="icon-step-backward">></i></button>
                </a>
                {#        </div>#}
                {#        <div class="span2 pull-right">#}
                <button class="btn btn-small btn-info disabled">{{ date|date:'M Y' }}</button>
                {% if not date|iscurrentmonth %}<a href="/electric/bar/{{ date|nextmonth:"%Y/%m/" }}">{% endif %}
                    <button class="btn btn-small pull-right {% if date|iscurrentmonth %}disabled{% endif %}"><i class="icon-step-forward">></i></button>
                {% if not date|iscurrentmonth %}</a>{% endif %}
                {% if not date|iscurrentmonth %}<a href="/electric/bar/month/">{% endif %}
                    <button class="btn btn-small pull-right {% if date|iscurrentmonth %}disabled{% endif %}"><i class="icon-fast-forward">></i></button>
                {% if not date|iscurrentmonth %}</a>{% endif %}
            </div>
        </div>
    </div>
    {% if statistics %}
        <div class="row">
            <div class="well">
                <h4>Statistics</h4>
                <ul class="unstyled">
                    <li>Totals:</li>
                        <ul>
                            <li><strong>{{ statistics.kwtotal|floatformat:2 }}</strong> kWh ({% if statistics.kwbudget > 0 %}+{% endif %}{{ statistics.kwbudget|floatformat:2 }})</li>
                            <li>$<strong>{{ statistics.kwtotalcost|floatformat:2 }}</strong> ({% if statistics.kwbudget > 0 %}+{% endif %}{{ statistics.kwbudgetcost|floatformat:2 }})</li>
                            <li>approx. $<strong>{{ statistics.kwyearcost|floatformat:2 }}</strong>/year</li>
                        </ul>
                    <li>Averages:</li>
                    <ul>
                        <li>7 day: <strong>{{ statistics.average7|floatformat:2 }}</strong> kWh/Day</li>
                        <li>14 day: <strong>{{ statistics.average14|floatformat:2 }}</strong> kWh/Day</li>
                        <li>28 day: <strong>{{ statistics.average28|floatformat:2 }}</strong> kWh/Day</li>
                    </ul>
                    <li>Est. Cost: $<strong>{{ statistics.kwcost|floatformat:4 }}</strong>/kWh</li>
                    {% if statistics.lastbill %}
                        <li>based on bill ending on <strong>{{ statistics.lastbill|date:'n/j/Y' }}</strong></li>
                    {% endif %}


                    {% if statistics.budgetdate %}
                        <li>Budget set
                            {% if statistics.budgetdate|istoday %}
                            <strong>today</strong>
                        {% else %}
                            on <strong>{{ statistics.budgetdate|date:'n/j/Y' }}</strong>
                        {% endif %}
                        </li>
                    {% endif %}
                    <li>Last update:
                        <strong>
                            {% if statistics.lastupdate|istoday %}
                                Today at {{ statistics.lastupdate|date:'P' }}
                            {% else %}
                                {{ statistics.lastupdate|date:'n/j @ P' }}
                            {% endif %}
                        </strong>
                    </li>
                </ul>
			</div>
		</div>
	{% endif %}
{% endblock %}

{% block content_electric %}
    <h1>Electricity Use <small>{{ date|date:'F Y' }}</small></h1>
    <h2>Daily Summary</h2>
    <div id='chart'>
        <img id="month_chart_image" src="{{ monthchart }}" height="150">
    </div>
    <hr/>
    <h2>Monthly History</h2>
    <div id='chart'>
        <img id="year_chart_image" src="{{ yearchart }}" height="150">
    </div>
			
{% endblock %}

